import memo from '../common/wrapMemo';
import React, { useEffect, useState } from 'react';
import style from './LogDetail.module.scss';
import { Scrollbars } from 'react-custom-scrollbars';
import Loading from '../common/Loading';
// import api from '../../api';

const LogDetail = memo((props) => {
    const { detail = {}, onClose } = props;
    const [loading, setLoading] = useState(false);
    const [featureDatas, setFeatureDatas] = useState({});

    useEffect(() => {
        // setLoading(true);

        // const {
        //     operation_content: { uid },
        //     operation_layer,
        // } = detail;
        // api.search
        //     .queryFeatureInfo({ uid, table: operation_layer })
        //     .then((res) => {
        //         const { infocode, feature = [] } = res.data;

        //         if (infocode === 10000) {
        //             // 数据过滤
        //             let featureData = {};
        //             Object.keys(feature[0]).forEach((key) => {
        //                 if (!key.startsWith('geom') && !key.startsWith('geojson')) {
        //                     featureData[key] = feature[0][key];
        //                 }
        //             });
        //             setFeatureDatas(featureData);
        //         }
        //     })
        //     .finally(() => {
        //         setLoading(false);
        //     });
    }, []);

    // 要素编辑内容
    const featureView =
        Object.keys(featureDatas).length > 0
            ? Object.keys(featureDatas).map((key, index) => {
                  const value = JSON.parse(JSON.stringify(featureDatas[key]));
                  return (
                      <div className={style.featureViewBox} key={index}>
                          <div className={style.item}>
                              <span>{key}</span>
                              <span>{value}</span>
                          </div>
                      </div>
                  );
              })
            : null;
    return (
        <>
            <div className={style.logDetail}>
                <div className={style.header}>
                    <span>{detail.operation_layer}</span>
                    <i className="iconfont icon-close" onClick={onClose}></i>
                </div>
                <div className={style.content}>
                    {loading ? (
                        <Loading />
                    ) : (
                        <div className={style.featureContent}>
                            <div className={style.images}></div>
                            <div className={style.featureTitle}>
                                <span>字段信息</span>
                            </div>
                            <div className={style.crossline}></div>
                            <div className={style.featureInfo}>
                                <Scrollbars
                                    autoHeight
                                    autoHeightMin={0}
                                    autoHeightMax={`calc(100vh - 350px)`}
                                >
                                    {featureView}
                                </Scrollbars>
                            </div>
                        </div>
                    )}
                </div>
            </div>
            <div className="mask"></div>
        </>
    );
});

export default LogDetail;
